<template>
  <div class="Qn-Bg">
    <div class="header">
      <div class="random" @click="RandomSet">
        <i class="el-icon-setting"></i>
        题目随机设置
      </div>
      <div class="hide"  >
        <el-checkbox @click="ShowAllIndex"
                     v-model="ifShowAllIndex"
        >批量添加题号
        </el-checkbox>

      </div>

      <div class="preview" @click="GoToPreview">
        <i class="el-icon-view"></i>
        预览
      </div>

      <div class="finishEdit" @click="GoToDesign">
        <i class="el-icon-check"></i>
        完成编辑
      </div>
    </div>
    <div class="Qn-Bgbody">
      <div class="left">
        <el-container style="height: 100%; border: 1px solid #eee">
          <el-main width="100%" >
            <el-tabs type="border-card" style="width: 200px; margin-top: -20px">
              <el-tab-pane label="题型选择">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    style="width: 150px; border: none"
                >
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-check" style="color: blue"></i>
                      <span>选择题</span>
                    </template>
                    <el-menu-item-group>

                      <el-popover placement="right" width="400" trigger="hover"  ref="singlechoice" :close-delay="0" :open-delay="200">
                        <preview-single-choice></preview-single-choice>
                      </el-popover>
                      <el-menu-item index="1-1"  v-popover:singlechoice @click="addSingleChoice">单选题</el-menu-item>


                      <el-popover placement="right" width="400" trigger="hover"  ref="muticlechoice" :close-delay="0" :open-delay="200" >
                        <PveviewMutipleChoive></PveviewMutipleChoive>

                      </el-popover>
                      <el-menu-item index="1-2"  v-popover:muticlechoice  @click="addMulChoice">多选题</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-edit" style="color: blue"></i>
                      <span>填空题</span>
                    </template>
                    <el-menu-item-group>
                      <el-popover placement="right" width="400" trigger="hover"  ref="fillone" :close-delay="0" :open-delay="200">
                        <preview-fill></preview-fill>

                      </el-popover>
                      <el-menu-item index="2-1" v-popover:fillone @click="addSingleTk">单项填空</el-menu-item>


<!--                      -->
<!--                      <el-popover placement="right" width="400" trigger="hover"  ref="fillmany"  close-delay = 0 :open-delay="200">-->
<!--                        <preview-many></preview-many>-->

<!--                      </el-popover>-->
<!--                      <el-menu-item index="2-2" v-popover:fillmany>多项填空</el-menu-item>-->
<!--       暂时未开发的题目类型                -->

                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="3">
                    <template slot="title">
                      <i class="el-icon-plus" style="color: blue"></i>
                      <span>评分题</span>
                    </template>
                    <el-menu-item-group>

<!--                      -->
<!--                      <el-popover placement="right" width="400" trigger="hover"  ref="scale"  close-delay = 0 :open-delay="200">-->
<!--                        <preview-scale></preview-scale>-->
<!--                      </el-popover>-->
<!--                      -->
<!--                      <el-menu-item index="3-1" v-popover:scale >量表题</el-menu-item>-->

<!--                      <el-popover placement="right" width="400" trigger="hover"  ref="singlescore"  close-delay = 0 :open-delay="200">-->
<!--                        <preview-single-score></preview-single-score>-->

<!--                      </el-popover>-->
<!--                      <el-menu-item index="3-2"  v-popover:singlescore>评分单选</el-menu-item>-->

<!--      暂时未开发的题目类型                -->

                      <el-popover placement="right" width="400" trigger="hover"  ref="evaluate" :close-delay="0" :open-delay="200">
                        <preview-evaluate></preview-evaluate>

                      </el-popover>
                      <el-menu-item index="3-3" v-popover:evaluate  @click="addRate"  >评价题</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>

<!--                  -->
<!--                  <el-submenu index="4">-->
<!--                    <template slot="title">-->
<!--                      <i class="el-icon-user" style="color: blue"></i>-->
<!--                      <span>个人信息</span>-->
<!--                    </template>-->
<!--                    <el-menu-item-group>-->
<!--                      <el-menu-item index="4-1">姓名</el-menu-item>-->
<!--                      <el-menu-item index="4-2">性别</el-menu-item>-->
<!--                      <el-menu-item index="4-3">年龄</el-menu-item>-->
<!--                      <el-menu-item index="4-4">手机 </el-menu-item>-->
<!--                      <el-menu-item index="4-5">行业</el-menu-item>-->
<!--                      <el-menu-item index="4-6">职业</el-menu-item>-->
<!--                    </el-menu-item-group>-->
<!--                  </el-submenu>-->
<!--                  -->
<!--        暂时未开发的题目类型          -->

                </el-menu>
              </el-tab-pane>
              <el-tab-pane label="问卷大纲">
                <el-table
                    :data="titleList"
                    stripe
                    border
                    style="height:100%;width: 300px; border: none">
                  <el-table-column
                      prop="name"
                      label="题目"
                      width="170"
                      style="border: none">
                    <template slot-scope="scope">
                      <span>{{ scope.$index+1 }}.{{ scope.row }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </div>
      <div class="right">
        <div class="title">
          <input type="text" v-model="questionNareTitle"

                 oninput="if(value.length>20)value=value.slice(0,20);"
                    style="width:95%;padding: 7px 0px;outline-style: none ;border: 0px;font-size:25px;text-align:center;" >
        </div>

        <editbody ref="editbodyref" :showId="ifShowAllIndex" :wenjuanTitle="questionNareTitle"
                  @setqqshowid="setShowI($event)" @shownairtitle="hehehe" @changedagang="changeDaGang"
        ></editbody>
      </div>
    </div>
  </div>
</template>

<script>

import PreviewSingleChoice from '../../../components/Preview/PreviewSingleChoice.vue'
import PveviewMutipleChoive from '../../../components/Preview/PreviewMutipleChoive.vue'
import PreviewFill from '../../../components/Preview/PreviewFill.vue'
// import PreviewMany from '../../../components/Preview/PreviewMany.vue'
// import PreviewScale from '../../../components/Preview/PreviewScale.vue'
// import PreviewSingleScore from '../../../components/Preview/PreviewSingleScore.vue'
import PreviewEvaluate from '../../../components/Preview/PreviewEvaluate.vue'
import Editbody from '../../../components/Edit.vue'
import {} from "../../../api";

export default {
  data(){
    return{
      titleList:[],
      ifShowAllIndex:false,
      isCollapse: true,
      questionNareTitle:'',
      IniShowId:false,
      questionnaireId:0
    }
  },

  components:{
      PreviewSingleChoice,
      PveviewMutipleChoive,
      PreviewFill,
      PreviewEvaluate,
      Editbody
  },
  created(){

  },
  methods: {
    changeDaGang:function (dl){
      this.titleList=dl;
    },
    hehehe:function (lalala){
      this.questionNareTitle=lalala;
    },

    setShowI(bbb){
      this.ifShowAllIndex=bbb;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    RandomSet() {},
    ShowAllIndex(){
      if(this.ifShowAllIndex)this.ifShowAllIndex=false;
      else this.ifShowAllIndex=true;
    },
    addSingleChoice(){
      this.$refs.editbodyref.addDan();
    },
    addMulChoice(){
      this.$refs.editbodyref.addMul();
    },
    addSingleTk(){
      this.$refs.editbodyref.addTk();
    },
    addRate(){
      this.$refs.editbodyref.addRate();
    },
    GoToDesign(){

      //保存问卷，提交问卷题目顺序
      this.$refs.editbodyref.FinishEditAndSaveSort();


      this.$router.push({path: '/manage'})
    },
    GoToPreview(){
      this.$router.push({name:'preview', query: {questionnaireId: this.$route.query.questionnaireId, index: this.$route.query.index}})
    }
  },
};
</script>

<style scoped>
.Qn-Bg {
  min-width: 1400px; /*避免输入框元素错位*/
  height: 100%;
  background: rgb(245, 245, 245);
  margin: 0px;
  padding: 0px;
  display: block;;
}
.header{
  background-color: #fff;
  height: 30px;
  color: black;
  display: flex;
}
.Qn-Bgbody{
  height: 94%;
  display: flex;
  margin-top:10px;
  justify-content: center;
}
.left {
  background-color: transparent;
}
.right {
  width: 58%;
  height: 98%;
  overflow: auto;
  background-color: rgb(238, 241, 246);
}
.preview {
  color: #409eff;
  background-color: white;
  width: 100px;
  font-weight: bolder;
  line-height: 30px;
}
.random {
  line-height: 30px;
  margin-left: 13%;
}
.hide {
  line-height: 30px;
  margin-left: 20px;
  margin-right: auto;
}
.random:hover,
.hide:hover {
  background-color: rgb(209, 205, 205);
  color: rgb(64, 138, 199);
  font-size: 16px;
}
.finishEdit {
  background-color: #409eff;
  width: 110px;
  font-weight: bold;
  line-height: 30px;
  margin-right: 13%;
  color: white;
}

.title{
  width: 100%;
  background-color: #fff;
  height: 65px;
  text-align: center;
  padding-top:15px;
}
</style>

